<script setup>

import {onBeforeMount, reactive, watchEffect} from "vue";
import {getListByPid} from "../util/request";

let provinces = reactive({})
let cities = reactive({})
let choose = reactive({province: '', city: '', county: '', town: '', village: ''})
onBeforeMount(() => {
  if (!Object.keys(provinces).length) {
    getListByPid('1').then(res => {
      let data = res.data.data;
      data.forEach(item => provinces[item.id] = {...item, children: {}})
      choose.province = data[0].id
    })
  }
})

watchEffect(() => {
  let {province} = choose
  if (province) {
    console.log(provinces[province].children)
    if (!Object.keys(provinces[province].children).length) {
      getListByPid(province).then(res => {
        let data = res.data.data
        data.forEach(item => provinces[province].children[item.id] = {...item, children: {}})
        cities = res.data.data
        choose.city = cities[0].id
      })
    }
  }
})

</script>

<template>
  <el-select v-model="choose.province" placeholder="选择省份" size="large">
    <el-option
        v-for="item in provinces"
        :key="item.id"
        :label="item.value"
        :value="item.id"/>
  </el-select>
  <el-select v-model="choose.city" placeholder="选择市区" size="large">
    <el-option
        v-for="item in cities"
        :key="item.id"
        :label="item.value"
        :value="item.id"/>
  </el-select>

</template>

<style scoped>

</style>
